<template>
  <div class="login-container">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="80px"
      size="normal"
      class="login-form"
    >
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <el-form-item label="" size="normal">
        <span class="svg-container">
          <el-icon>
            <Avatar />
          </el-icon>
        </span>
        <el-input name="username" placeholder="username" type="text"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="" size="normal">
        <span class="show-pwd">
          <el-icon>
            <Avatar />
          </el-icon>
        </span>
        <el-input name="password" placeholder="password"></el-input>
      </el-form-item>
      <!-- 登录按钮 -->
      <el-button type="primary" size="default">登录</el-button>
    </el-form>
  </div>
</template>

<script setup>
import { Avatar } from '@element-plus/icons'
export default {}
</script>

<style lang="scss" scoped>
//全局共用css
// @import '@/styles/mixin.scss';
$bg: #fff;
$fontSize: 15px;

#login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(#e8f4f8, lightblue);
}
#login_form {
  width: 500px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: #fff;
  @include global_Center;
  z-index: 9999;
  border-radius: 4px;
}
.title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 20px;
}
::v-deep .el-input {
  display: inline-block;
  height: 46px;
  width: 85%;
}
.input-item-wrap {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
::v-deep input {
  height: 46px;
  background: transparent;
  border: none;
  border-radius: 0px;
  padding: 12px 5px 12px 15px;
}
::v-deep .el-form-item__label {
  font-size: $fontSize;
  vertical-align: middle;
}
.svg-container {
  padding: 6px 5px 6px 15px;
  color: #000;
  vertical-align: middle;
  display: inline-block;
}
</style>
